<template>
  <view class="sc-gap" :style="[tagStyle]"></view>
</template>
<script>
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";

export default {
  name: "ScGap",
  mixins: [mpMixin, mixin],
  props: {
    height: {
      type: [String, Number],
      default: 20,
    },
    bgColor: {
      type: String,
      default: "#f5f5f5",
    },
    mt: {
      type: [String, Number],
      default: 0,
    },
    mb: {
      type: [String, Number],
      default: 0,
    },
  },
  computed: {
    tagStyle() {
      return {
        height: this.$sc.addUnit(this.height),
        backgroundColor: this.bgColor,
        margin: `${this.$sc.addUnit(this.mt)} 0 ${this.$sc.addUnit(this.mb)} 0`,
      }
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.sc-gap {
  width: 100%;
}
</style>
